<template>
  <div class="goods-item">
    <div>{{ product.time_from }}</div>
    <div class="xiang">
      <div class="goods-info-left">
      <h3>{{ product.year }}年定期存款</h3>
      <p class="price">{{ product.rate}}<small>%</small></p>
      <h5 style="color:#b4b4b4">年利率</h5>
    </div>
    <div class="goods-info-right">
      <p>
        <strong> 每人限购{{ product.buy_max }}份</strong>
      </p>
    </div>
  </div>
    </div>
    
</template>

<script>
import { reactive, toRefs } from "vue";

export default {
  props: {
    product: Object,
    default() {
      return {};
    },
  },
  setup() {
    const state = reactive({
      count: 0,
    });

    return {
      ...toRefs(state),
    };
  },
};
</script>

<style lang="scss" scoped>
.goods-item {
  margin-top: 10px;
  width: 90%;
  padding-bottom: 20px;
  position: relative;
  border-bottom: 2px solid #efefef;
  margin-bottom: 15px;
}
.xiang{
  display: flex;
  margin-top: 20px;
}
.goods-info-left {
  padding-left: 6%;
  text-align: left;
  width: 50%;
}
.price {
  color: rgb(238, 242, 16);
  font-size: 40px;
  font-weight: 700;
  line-height: 70px;
}
.goods-info-right {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
